<template>
	<view style="background: #F5F5F5;height:100%">
		<u-navbar :safeAreaInsetTop="false" :autoBack="true">
			<view class="u-nav-slot" slot="center">
				<view @click="searchResults">
					<u-search v-model="historyRecordName"  :clearabled="true" style="width:328px"  :showAction="false"></u-search>
				</view>
			</view>
		</u-navbar>
		<view style="background: white;height:92px">
			<div>
				<u-tabs
						:list="list4"
						lineWidth="30"
						lineColor="#333333"
						:current="current"
						@change="change"
						:activeStyle="{
							color: '#303133',
							fontWeight: 'bold',
							transform: 'scale(1.05)'
						}"
						:inactiveStyle="{
							color: '#606266',
							transform: 'scale(1)'
						}"
						itemStyle="padding-left: 23px; padding-right: 26px; height: 34px;margin-top:50px;"
					>
				</u-tabs>
				<view v-if="current == 0">
					<div v-for="(item1,index) in topicList" :key="index" style="width:160px;height:310px;float: left;margin-left:10px;margin-top:10px">
						<div v-for="(ele,index) in item1.url" :key="index">
							<img :src="ele" style="width:160px;height:220px;float:left;margin-top:25px;margin-left:10px"></img>
						</div>
						<p style="font-weight: bold;font-size: 14px;margin-left:10px">#{{item1.topicName}}</p>
						<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
						<p style="margin-top:10px;margin-left:50px">{{item1.userName}}</p>
					</div>
				</view>
				<view v-if="current == 1"> 
					 <div v-for="(item2,index) in diaryList" :key="index" style="width:410px;height:410px;float: left;margin-top:30px">
						<view style="background-color: #F2F2F2;margin-left: 15px; margin-right: 15px;">
						  <u-grid :border="false"  col="2">
						    <u-grid-item style="border: 5rpx solid white;"
							v-for="(itemDaily2,index1) in item2.diaryFileId.split(',')" 
							:key="index1"
						    >
							<u--image :showLoading="true" :src="itemDaily2" width="342rpx" height="300rpx"  style="float:left"></u--image>
						    </u-grid-item>
						  </u-grid>
						</view>
						<p style="font-weight: bold;font-size: 14px;margin-left:10px">#{{item2.diaryTitle}}</p>
						<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
						<p style="margin-top:10px;margin-left:50px">{{item2.userName}}</p>
					 </div>
				</view>
				<view v-if="current == 2"> 
					<div v-for="(item3,index) in informationList" :key="index" style="width:360px;height:310px;float: left;margin-left:10px;margin-top:10px">
						<img :src="item3.informationFileId" style="width:360px;height:230px;float:left;margin-top:25px;margin-left:10px"></img>
						<p style="font-weight: bold;font-size: 18px;margin-left:10px">#{{item3.informationTitle}}</p>
						<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:30px;height:30px;float:left;margin-top:5px;margin-left:10px"></img>
						<p style="margin-top:10px;margin-left:50px">{{item3.userName}}</p>
					</div>
				</view>
				<view v-if="current == 4">
					<div v-for="(item4,index) in userList" :key="index" style="border-radius: 30px 30px 30px 30px;background: #EBEBEC ;width:390px;height:55px;float: left;margin-left:10px;margin-top:20px">
						<img :src="imgUrl" style="border-radius: 30px 30px 30px 30px;width:45px;height:45px;float:left;margin-top:5px;margin-left:10px"></img>
						<p style="margin-top:15px;margin-left:200px">{{item4.userName}}</p>
					</div>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: 'http://c.svner.cn/19.jpg',
				list4: [{
					name: '话题'
				}, {
					name: '日记'
				}, {
					name: '咨询'
				}, {
					name: '百科'
				}, {
					name: '用户'
				}],
				current: 0,
				historyRecordName: '',
				// 话题
				topicList:[],
				diaryList:[],
				informationList:[],
				userList:[]
			}
		},
		onLoad(option) {
			this.historyRecordName = option.historyRecordName
			// 话题
			this.searchTopic()
			// 日记
			this.searchDiary()
			// 咨询
			this.searchInformation()
			//用户
			this.searchUser()
			
		},
		methods: {
			// 搜索话题
			searchTopic () {
				this.$axios({
					url: '/contents/getHistoryRecordTopic?title=' + this.historyRecordName,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.topicList = res.data.object
						}
					}
				})
			},
			// 搜索日记
			searchDiary () {
				this.$axios({
					url: '/contents/getHistoryRecordDiary?title=' + this.historyRecordName,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.diaryList = res.data.object
						}
					}
				})
			},
			// 搜索咨询
			searchInformation () {
				this.$axios({
					url: '/contents/getHistoryRecordInformation?title=' + this.historyRecordName,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.informationList = res.data.object
						}
					}
				})
			},
			// 搜索用户
			searchUser () {
				this.$axios({
					url: '/contents/getHistoryRecordUser?title=' + this.historyRecordName,
					method: 'get',
					success: (res) => {
						if (res.data.code === 200) {
							this.userList = res.data.object
						}
					}
				})
			},
			// 导航标签
			change(index) {
			  this.current = index.index;
			  //如报错则用this.current = index代替上行
			},
			// 返回搜索页
			searchResults (){
				uni.navigateTo({
					  url: '../index/search'
				})
			}
		}
	}
</script>

<style>
html, body {
     height: 100%;
}
</style>
